<template>
  <view class="resource-data-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <view class="header-title">资源数据</view>
      <view class="refresh-btn" @click="refreshData">
        <image src="/static/icons/refresh-icon.svg" class="refresh-icon"></image>
      </view>
    </view>

    <!-- 筛选区域 -->
    <view class="filter-section">
      <!-- 日期选择 -->
      <view class="filter-item">
        <view class="filter-label">统计日期</view>
        <view class="date-selector" @click="showDatePicker = true">
          <text class="date-text">{{ formatDate(selectedDate) }}</text>
          <image src="/static/icons/calendar-icon.svg" class="calendar-icon"></image>
        </view>
      </view>

      <!-- 数据类型切换 -->
      <view class="data-tabs">
        <view 
          v-for="(tab, index) in dataTabs" 
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          {{ tab.name }}
        </view>
      </view>
    </view>

    <!-- 泊位数据 -->
    <view v-if="activeTab === 0" class="berth-data">
      <!-- 统计卡片 -->
      <view class="stats-cards">
        <view class="stats-card">
          <view class="card-title">总泊位数</view>
          <view class="card-value">{{ berthStats.totalBerths }}</view>
          <view class="card-unit">个</view>
        </view>
        <view class="stats-card">
          <view class="card-title">在线泊位</view>
          <view class="card-value">{{ berthStats.onlineBerths }}</view>
          <view class="card-unit">个</view>
        </view>
        <view class="stats-card">
          <view class="card-title">占用泊位</view>
          <view class="card-value">{{ berthStats.occupiedBerths }}</view>
          <view class="card-unit">个</view>
        </view>
        <view class="stats-card">
          <view class="card-title">空闲泊位</view>
          <view class="card-value">{{ berthStats.freeBerths }}</view>
          <view class="card-unit">个</view>
        </view>
      </view>

      <!-- 近期无取证泊位 -->
      <view class="data-section">
        <view class="section-header">
          <text class="section-title">近期无取证泊位</text>
          <text class="section-count">({{ noEvidenceBerths.length }}个)</text>
        </view>
        
        <view class="berth-list">
          <view class="list-header">
            <text class="header-cell">泊位编号</text>
            <text class="header-cell">位置</text>
            <text class="header-cell">无取证天数</text>
            <text class="header-cell">状态</text>
          </view>
          
          <view v-for="(berth, index) in noEvidenceBerths" :key="index" class="list-item" @click="viewBerthDetail(berth)">
            <view class="item-cell">
              <text class="berth-code">{{ berth.code }}</text>
            </view>
            <view class="item-cell">
              <text class="berth-location">{{ berth.location }}</text>
            </view>
            <view class="item-cell">
              <text class="no-evidence-days" :class="getNoEvidenceDaysClass(berth.noEvidenceDays)">
                {{ berth.noEvidenceDays }}天
              </text>
            </view>
            <view class="item-cell">
              <view class="status-badge" :class="berth.status">
                {{ getBerthStatusText(berth.status) }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 最近上线泊位 -->
      <view class="data-section">
        <view class="section-header">
          <text class="section-title">最近上线泊位</text>
          <text class="section-count">({{ recentOnlineBerths.length }}个)</text>
        </view>
        
        <view class="berth-list">
          <view class="list-header">
            <text class="header-cell">泊位编号</text>
            <text class="header-cell">位置</text>
            <text class="header-cell">上线时间</text>
            <text class="header-cell">状态</text>
          </view>
          
          <view v-for="(berth, index) in recentOnlineBerths" :key="index" class="list-item" @click="viewBerthDetail(berth)">
            <view class="item-cell">
              <text class="berth-code">{{ berth.code }}</text>
            </view>
            <view class="item-cell">
              <text class="berth-location">{{ berth.location }}</text>
            </view>
            <view class="item-cell">
              <text class="online-time">{{ formatDateTime(berth.onlineTime) }}</text>
            </view>
            <view class="item-cell">
              <view class="status-badge" :class="berth.status">
                {{ getBerthStatusText(berth.status) }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 设备状态 -->
    <view v-if="activeTab === 1" class="device-status">
      <!-- 设备统计卡片 -->
      <view class="stats-cards">
        <view class="stats-card">
          <view class="card-title">总设备数</view>
          <view class="card-value">{{ deviceStats.totalDevices }}</view>
          <view class="card-unit">台</view>
        </view>
        <view class="stats-card">
          <view class="card-title">在线设备</view>
          <view class="card-value">{{ deviceStats.onlineDevices }}</view>
          <view class="card-unit">台</view>
        </view>
        <view class="stats-card">
          <view class="card-title">离线设备</view>
          <view class="card-value">{{ deviceStats.offlineDevices }}</view>
          <view class="card-unit">台</view>
        </view>
        <view class="stats-card">
          <view class="card-title">故障设备</view>
          <view class="card-value">{{ deviceStats.faultDevices }}</view>
          <view class="card-unit">台</view>
        </view>
      </view>

      <!-- 设备状态分布 -->
      <view class="device-distribution">
        <view class="section-header">
          <text class="section-title">设备状态分布</text>
        </view>
        
        <view class="distribution-chart">
          <view v-for="(item, index) in deviceDistribution" :key="index" class="chart-item">
            <view class="chart-bar">
              <view class="bar-fill" :style="{ width: item.percentage + '%', backgroundColor: item.color }"></view>
            </view>
            <view class="chart-info">
              <text class="chart-label">{{ item.label }}</text>
              <text class="chart-value">{{ item.count }}台 ({{ item.percentage }}%)</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 设备类型统计 -->
      <view class="device-types">
        <view class="section-header">
          <text class="section-title">设备类型统计</text>
        </view>
        
        <view class="type-grid">
          <view v-for="(type, index) in deviceTypes" :key="index" class="type-card">
            <view class="type-icon">
              <image :src="type.icon" class="device-icon"></image>
            </view>
            <view class="type-info">
              <text class="type-name">{{ type.name }}</text>
              <text class="type-count">{{ type.count }}台</text>
              <text class="type-online">在线: {{ type.online }}台</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 人员资源 -->
    <view v-if="activeTab === 2" class="staff-resources">
      <!-- 人员统计卡片 -->
      <view class="stats-cards">
        <view class="stats-card">
          <view class="card-title">总人员数</view>
          <view class="card-value">{{ staffStats.totalStaff }}</view>
          <view class="card-unit">人</view>
        </view>
        <view class="stats-card">
          <view class="card-title">在岗人员</view>
          <view class="card-value">{{ staffStats.onDutyStaff }}</view>
          <view class="card-unit">人</view>
        </view>
        <view class="stats-card">
          <view class="card-title">休假人员</view>
          <view class="card-value">{{ staffStats.onLeaveStaff }}</view>
          <view class="card-unit">人</view>
        </view>
        <view class="stats-card">
          <view class="card-title">离职人员</view>
          <view class="card-value">{{ staffStats.resignedStaff }}</view>
          <view class="card-unit">人</view>
        </view>
      </view>

      <!-- 部门人员分布 -->
      <view class="department-distribution">
        <view class="section-header">
          <text class="section-title">部门人员分布</text>
        </view>
        
        <view class="department-list">
          <view v-for="(dept, index) in departmentStats" :key="index" class="department-item">
            <view class="dept-info">
              <text class="dept-name">{{ dept.name }}</text>
              <text class="dept-count">{{ dept.totalCount }}人</text>
            </view>
            <view class="dept-details">
              <view class="detail-item">
                <text class="detail-label">在岗:</text>
                <text class="detail-value on-duty">{{ dept.onDuty }}人</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">休假:</text>
                <text class="detail-value on-leave">{{ dept.onLeave }}人</text>
              </view>
              <view class="detail-item">
                <text class="detail-label">离职:</text>
                <text class="detail-value resigned">{{ dept.resigned }}人</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 岗位分布 -->
      <view class="position-distribution">
        <view class="section-header">
          <text class="section-title">岗位分布</text>
        </view>
        
        <view class="position-grid">
          <view v-for="(position, index) in positionStats" :key="index" class="position-card">
            <view class="position-header">
              <text class="position-name">{{ position.name }}</text>
              <text class="position-total">{{ position.total }}人</text>
            </view>
            <view class="position-progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: (position.onDuty / position.total * 100) + '%' }"></view>
              </view>
              <text class="progress-text">在岗率: {{ ((position.onDuty / position.total) * 100).toFixed(1) }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 日期选择弹窗 -->
    <up-datetime-picker
      ref="datetimePicker"
      v-model="showDatePicker"
      mode="date"
      :value="selectedDate"
      @confirm="onDateConfirm"
      @cancel="showDatePicker = false"
    ></up-datetime-picker>

    <!-- 详情弹窗 -->
    <view class="detail-modal" v-if="showDetailModal">
      <view class="detail-content">
        <view class="detail-header">
          <text class="detail-title">{{ detailTitle }}</text>
          <text class="close-btn" @click="showDetailModal = false">×</text>
        </view>
        
        <view class="detail-body">
          <view v-if="detailType === 'berth'" class="berth-detail">
            <view class="detail-item">
              <text class="detail-label">泊位编号：</text>
              <text class="detail-value">{{ currentDetail.code }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">泊位位置：</text>
              <text class="detail-value">{{ currentDetail.location }}</text>
            </view>
            <view class="detail-item" v-if="currentDetail.noEvidenceDays">
              <text class="detail-label">无取证天数：</text>
              <text class="detail-value">{{ currentDetail.noEvidenceDays }}天</text>
            </view>
            <view class="detail-item" v-if="currentDetail.onlineTime">
              <text class="detail-label">上线时间：</text>
              <text class="detail-value">{{ formatDateTime(currentDetail.onlineTime) }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">泊位状态：</text>
              <text class="detail-value">{{ getBerthStatusText(currentDetail.status) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const selectedDate = ref(new Date())
const showDatePicker = ref(false)
const activeTab = ref(0)
const showDetailModal = ref(false)
const detailType = ref('')
const detailTitle = ref('')
const currentDetail = ref(null)

// 数据类型标签
const dataTabs = ref([
  { name: '泊位数据', value: 'berth' },
  { name: '设备状态', value: 'device' },
  { name: '人员资源', value: 'staff' }
])

// 泊位统计数据
const berthStats = ref({
  totalBerths: 0,
  onlineBerths: 0,
  occupiedBerths: 0,
  freeBerths: 0
})

// 设备统计数据
const deviceStats = ref({
  totalDevices: 0,
  onlineDevices: 0,
  offlineDevices: 0,
  faultDevices: 0
})

// 人员统计数据
const staffStats = ref({
  totalStaff: 0,
  onDutyStaff: 0,
  onLeaveStaff: 0,
  resignedStaff: 0
})

// 近期无取证泊位
const noEvidenceBerths = ref([])

// 最近上线泊位
const recentOnlineBerths = ref([])

// 设备状态分布
const deviceDistribution = ref([])

// 设备类型统计
const deviceTypes = ref([])

// 部门统计
const departmentStats = ref([])

// 岗位统计
const positionStats = ref([])

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  const date = new Date(dateTime)
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${month}-${day} ${hours}:${minutes}`
}

// 切换标签
const switchTab = (index) => {
  activeTab.value = index
  if (index === 0) {
    loadBerthData()
  } else if (index === 1) {
    loadDeviceData()
  } else {
    loadStaffData()
  }
}

// 日期确认
const onDateConfirm = (value) => {
  selectedDate.value = new Date(value)
  showDatePicker.value = false
  refreshData()
}

// 刷新数据
const refreshData = () => {
  if (activeTab.value === 0) {
    loadBerthData()
  } else if (activeTab.value === 1) {
    loadDeviceData()
  } else {
    loadStaffData()
  }
}

// 获取无取证天数样式
const getNoEvidenceDaysClass = (days) => {
  if (days >= 30) return 'critical'
  if (days >= 15) return 'warning'
  if (days >= 7) return 'attention'
  return 'normal'
}

// 获取泊位状态文本
const getBerthStatusText = (status) => {
  const statusMap = {
    'online': '在线',
    'offline': '离线',
    'occupied': '占用',
    'free': '空闲',
    'fault': '故障'
  }
  return statusMap[status] || '未知'
}

// 查看泊位详情
const viewBerthDetail = (berth) => {
  currentDetail.value = berth
  detailType.value = 'berth'
  detailTitle.value = `${berth.code} - 详细信息`
  showDetailModal.value = true
}

// 加载泊位数据
const loadBerthData = () => {
  // 模拟泊位统计数据
  const totalBerths = 1200
  const onlineBerths = Math.floor(totalBerths * 0.85)
  const occupiedBerths = Math.floor(onlineBerths * 0.6)
  const freeBerths = onlineBerths - occupiedBerths

  berthStats.value = {
    totalBerths,
    onlineBerths,
    occupiedBerths,
    freeBerths
  }

  // 模拟近期无取证泊位数据
  const noEvidenceData = []
  for (let i = 1; i <= 15; i++) {
    noEvidenceData.push({
      code: `B${String(i).padStart(4, '0')}`,
      location: `中山路${i}号`,
      noEvidenceDays: Math.floor(Math.random() * 45) + 1,
      status: Math.random() > 0.7 ? 'offline' : 'online'
    })
  }
  noEvidenceBerths.value = noEvidenceData

  // 模拟最近上线泊位数据
  const recentOnlineData = []
  for (let i = 1; i <= 12; i++) {
    const onlineTime = new Date()
    onlineTime.setHours(onlineTime.getHours() - Math.floor(Math.random() * 72))
    
    recentOnlineData.push({
      code: `B${String(1000 + i).padStart(4, '0')}`,
      location: `解放路${i}号`,
      onlineTime: onlineTime.toISOString(),
      status: 'online'
    })
  }
  recentOnlineBerths.value = recentOnlineData
}

// 加载设备数据
const loadDeviceData = () => {
  // 模拟设备统计数据
  const totalDevices = 450
  const onlineDevices = Math.floor(totalDevices * 0.88)
  const faultDevices = Math.floor(totalDevices * 0.05)
  const offlineDevices = totalDevices - onlineDevices - faultDevices

  deviceStats.value = {
    totalDevices,
    onlineDevices,
    offlineDevices,
    faultDevices
  }

  // 设备状态分布
  deviceDistribution.value = [
    {
      label: '在线设备',
      count: onlineDevices,
      percentage: ((onlineDevices / totalDevices) * 100).toFixed(1),
      color: '#28a745'
    },
    {
      label: '离线设备',
      count: offlineDevices,
      percentage: ((offlineDevices / totalDevices) * 100).toFixed(1),
      color: '#6c757d'
    },
    {
      label: '故障设备',
      count: faultDevices,
      percentage: ((faultDevices / totalDevices) * 100).toFixed(1),
      color: '#dc3545'
    }
  ]

  // 设备类型统计
  deviceTypes.value = [
    {
      name: '地磁检测器',
      icon: '/static/icons/magnetic-sensor.svg',
      count: 180,
      online: 165
    },
    {
      name: '视频桩',
      icon: '/static/icons/video-stake.svg',
      count: 120,
      online: 108
    },
    {
      name: '手持终端',
      icon: '/static/icons/handheld-device.svg',
      count: 85,
      online: 78
    },
    {
      name: '收费机',
      icon: '/static/icons/payment-machine.svg',
      count: 65,
      online: 60
    }
  ]
}

// 加载人员数据
const loadStaffData = () => {
  // 模拟人员统计数据
  const totalStaff = 156
  const onDutyStaff = Math.floor(totalStaff * 0.82)
  const onLeaveStaff = Math.floor(totalStaff * 0.12)
  const resignedStaff = totalStaff - onDutyStaff - onLeaveStaff

  staffStats.value = {
    totalStaff,
    onDutyStaff,
    onLeaveStaff,
    resignedStaff
  }

  // 部门统计
  departmentStats.value = [
    {
      name: '巡检部',
      totalCount: 45,
      onDuty: 38,
      onLeave: 5,
      resigned: 2
    },
    {
      name: '技术部',
      totalCount: 28,
      onDuty: 25,
      onLeave: 2,
      resigned: 1
    },
    {
      name: '运营部',
      totalCount: 35,
      onDuty: 30,
      onLeave: 3,
      resigned: 2
    },
    {
      name: '财务部',
      totalCount: 18,
      onDuty: 16,
      onLeave: 1,
      resigned: 1
    },
    {
      name: '客服部',
      totalCount: 22,
      onDuty: 19,
      onLeave: 2,
      resigned: 1
    },
    {
      name: '管理层',
      totalCount: 8,
      onDuty: 8,
      onLeave: 0,
      resigned: 0
    }
  ]

  // 岗位统计
  positionStats.value = [
    {
      name: '巡检员',
      total: 42,
      onDuty: 36
    },
    {
      name: '技术员',
      total: 25,
      onDuty: 22
    },
    {
      name: '运营专员',
      total: 30,
      onDuty: 26
    },
    {
      name: '客服专员',
      total: 20,
      onDuty: 17
    },
    {
      name: '财务专员',
      total: 15,
      onDuty: 14
    },
    {
      name: '管理人员',
      total: 12,
      onDuty: 12
    }
  ]
}

// 页面加载
onMounted(() => {
  loadBerthData()
})
</script>

<style lang="scss" scoped>
.resource-data-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
  }
  
  .refresh-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    
    .refresh-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.filter-section {
  background-color: white;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .filter-item {
    margin-bottom: 30rpx;
    
    .filter-label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
      font-weight: 500;
    }
    
    .date-selector {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      border: 2rpx solid #e0e0e0;
      border-radius: 12rpx;
      background-color: #fafafa;
      
      .date-text {
        font-size: 32rpx;
        color: #333;
      }
      
      .calendar-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  
  .data-tabs {
    display: flex;
    background-color: #f0f0f0;
    border-radius: 12rpx;
    padding: 6rpx;
    
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 20rpx;
      font-size: 28rpx;
      color: #666;
      border-radius: 8rpx;
      transition: all 0.3s;
      
      &.active {
        background-color: white;
        color: #667eea;
        font-weight: bold;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.stats-cards {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  
  .stats-card {
    width: calc(50% - 20rpx);
    margin: 10rpx;
    background-color: white;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .card-title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 15rpx;
      text-align: center;
    }
    
    .card-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 5rpx;
    }
    
    .card-unit {
      font-size: 24rpx;
      color: #999;
      text-align: center;
    }
  }
}

.data-section {
  background-color: white;
  margin: 0 20rpx 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .section-header {
    padding: 30rpx;
    border-bottom: 2rpx solid #f0f0f0;
    display: flex;
    align-items: center;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .section-count {
      font-size: 28rpx;
      color: #666;
      margin-left: 15rpx;
    }
  }
}

.berth-list {
  .list-header {
    display: flex;
    background-color: #f8f9fa;
    padding: 25rpx 20rpx;
    border-bottom: 2rpx solid #e9ecef;
    
    .header-cell {
      flex: 1;
      font-size: 28rpx;
      font-weight: bold;
      color: #495057;
      text-align: center;
    }
  }
  
  .list-item {
    display: flex;
    padding: 25rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.2s;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background-color: #f8f9fa;
    }
    
    .item-cell {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
    }
  }
}

.berth-code {
  font-weight: bold;
  color: #333;
}

.berth-location {
  color: #666;
}

.no-evidence-days {
  font-weight: bold;
  
  &.normal {
    color: #28a745;
  }
  
  &.attention {
    color: #ffc107;
  }
  
  &.warning {
    color: #fd7e14;
  }
  
  &.critical {
    color: #dc3545;
  }
}

.online-time {
  color: #666;
  font-size: 24rpx;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
  
  &.online {
    background-color: #d4edda;
    color: #155724;
  }
  
  &.offline {
    background-color: #f8d7da;
    color: #721c24;
  }
  
  &.occupied {
    background-color: #fff3cd;
    color: #856404;
  }
  
  &.free {
    background-color: #d1ecf1;
    color: #0c5460;
  }
  
  &.fault {
    background-color: #f8d7da;
    color: #721c24;
  }
}

.distribution-chart {
  padding: 30rpx;
  
  .chart-item {
    margin-bottom: 25rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .chart-bar {
      height: 20rpx;
      background-color: #e9ecef;
      border-radius: 10rpx;
      overflow: hidden;
      margin-bottom: 10rpx;
      
      .bar-fill {
        height: 100%;
        border-radius: 10rpx;
        transition: width 0.3s;
      }
    }
    
    .chart-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .chart-label {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      
      .chart-value {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}

.type-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  
  .type-card {
    width: calc(50% - 20rpx);
    margin: 10rpx;
    background-color: #f8f9fa;
    border-radius: 15rpx;
    padding: 25rpx;
    display: flex;
    align-items: center;
    
    .type-icon {
      margin-right: 20rpx;
      
      .device-icon {
        width: 50rpx;
        height: 50rpx;
      }
    }
    
    .type-info {
      flex: 1;
      
      .type-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }
      
      .type-count {
        font-size: 24rpx;
        color: #666;
        display: block;
        margin-bottom: 5rpx;
      }
      
      .type-online {
        font-size: 22rpx;
        color: #28a745;
        display: block;
      }
    }
  }
}

.department-list {
  padding: 20rpx;
  
  .department-item {
    background-color: #f8f9fa;
    border-radius: 15rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .dept-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .dept-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333;
      }
      
      .dept-count {
        font-size: 28rpx;
        color: #667eea;
        font-weight: bold;
      }
    }
    
    .dept-details {
      display: flex;
      justify-content: space-between;
      
      .detail-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .detail-label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 5rpx;
        }
        
        .detail-value {
          font-size: 26rpx;
          font-weight: bold;
          
          &.on-duty {
            color: #28a745;
          }
          
          &.on-leave {
            color: #ffc107;
          }
          
          &.resigned {
            color: #dc3545;
          }
        }
      }
    }
  }
}

.position-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  
  .position-card {
    width: calc(50% - 20rpx);
    margin: 10rpx;
    background-color: #f8f9fa;
    border-radius: 15rpx;
    padding: 25rpx;
    
    .position-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .position-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
      
      .position-total {
        font-size: 26rpx;
        color: #667eea;
        font-weight: bold;
      }
    }
    
    .position-progress {
      .progress-bar {
        height: 12rpx;
        background-color: #e9ecef;
        border-radius: 6rpx;
        overflow: hidden;
        margin-bottom: 10rpx;
        
        .progress-fill {
          height: 100%;
          background-color: #28a745;
          border-radius: 6rpx;
          transition: width 0.3s;
        }
      }
      
      .progress-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  .detail-content {
    background-color: white;
    border-radius: 20rpx;
    width: 90%;
    max-width: 600rpx;
    max-height: 80vh;
    overflow: hidden;
    
    .detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .detail-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }
      
      .close-btn {
        font-size: 40rpx;
        color: #999;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .detail-body {
      padding: 30rpx;
      max-height: 60vh;
      overflow-y: auto;
      
      .detail-item {
        display: flex;
        margin-bottom: 25rpx;
        
        .detail-label {
          font-size: 28rpx;
          color: #666;
          width: 200rpx;
          flex-shrink: 0;
        }
        
        .detail-value {
          font-size: 28rpx;
          color: #333;
          flex: 1;
        }
      }
    }
  }
}
</style>